<template>
  <div class="productSort">
    <form @submit.prevent="submitForm">
      <div class="header acea-row row-center-wrapper" ref="header">
        <div class="head">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-row :gutter="20" class="name1 des">商家名称</el-row>
              <el-row :gutter="20" class="shopdes des2"
                >商家商家信息商家信息商家信息商家信息商家信息信息</el-row
              >
            </el-col>
            <el-col :span="6">
              <el-image
                style="width: 1.2rem; height:1.2rem; margin-top: 10px; border-radius: 10px;"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :fit="fit"
              ></el-image>
            </el-col>
          </el-row>
        </div>

        <!-- <div class="footers">
          <div class="footer1">
            <el-image
              style="width: 0.8rem; height:0.8rem; margin: 10px 0 0 8px; border-radius: 10px;"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :fit="fit"
            ></el-image>
            <div class="jishu">2</div>
          </div>
          <div class="footer2">共计￥800</div>
          <div class="footer3">选好了</div>
        </div> -->
      </div>
    </form>
    <div class="aside">
      <div
        class="item acea-row row-center-wrapper"
        :class="index === navActive ? 'on' : ''"
        v-for="(item, index) in category"
        :key="index"
        @click="asideTap(index)"
      >
        <span>{{ item.cateName }}</span>
      </div>
    </div>
    <div class="conter" @scroll.native="onScroll">
      <div class="listw" v-for="(item, index) in category" :key="index">
        <div class="title acea-row row-center-wrapper" ref="title">
          <div class="line"></div>
          <div class="name">{{ item.cateName }}</div>
          <div class="line"></div>
        </div>
        <div class="list acea-row">
          <router-link
            class="item acea-row row-column row-middle"
            v-for="(child, index) in item.children"
            :key="index"
            :to="{
              path: '/goods_list',
              query: { id: child.id, title: child.cateName }
            }"
          >
            <div class="content">
              <div class="picture"><img :src="child.image" /></div>
              <div class="message">
                <div class="shop_name">{{ child.storeName }}</div>
                <div class="shop_num">月售{{ child.sales }}份</div>
                <div class="shop_price">￥ {{ child.price }}</div>
              </div>
              <!-- <img
                class="m-cart"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                @click.prevent="joinCart(child)"
              /> -->
              <i
                class="m-cart iconfont icon-jia"
                @click.prevent="joinCart(child)"
              ></i>
            </div>
          </router-link>
        </div>
      </div>
      <div style="width: 100%; height: 1.5rem;"></div>
    </div>

    <el-drawer
      :visible.sync="drawer"
      direction="btt"
      show-close="false"
      size="65%"
    >
      <img
        class="guige"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      />
      <div class="mess1">
        <p class="gui_name">
          55555555555555555555555555555555555555555555555555555555555555555555555555
        </p>
        <p class="gui_num">
          <span class="gui_num1">￥<span class="gui_num2">100</span></span>
          <span class="gui_num3">库存:<span>100</span></span>
        </p>
      </div>
      <div class="gui_con">
        <p class="gui_p">颜色</p>
        <div class="gui1">
          <span>sasasas</span> <span>dadsdada</span> <span>s</span>
          <span>sasasas</span> <span>dadsdada</span> <span>s</span>
        </div>
        <p class="gui_p">尺寸</p>
        <div class="gui1">
          <span :class="{ background: index === 1 ? '#1abb1d' : '#ffffff' }"
            >sasasas</span
          >
          <span>dadsdada</span> <span>s</span> <span>sasasas</span>
          <span>dadsdada</span> <span>s</span>
        </div>
      </div>
      <p class="gui_p">数量</p>
      <el-input-number
        style="margin: 0.2rem 0 0 0.2rem"
        v-model="num"
        @change="handleChange"
        :min="1"
        :max="10"
        size="small"
      ></el-input-number>
      <div class="gui_footer">
        <el-button type="primary" size="small">加入购物车</el-button>
        <el-button type="success" size="small">立即购买</el-button>
      </div>
    </el-drawer>

    <div style="height:1.2rem;"></div>
  </div>
</template>
<script>
import debounce from "lodash.debounce";
import { getCategory } from "@api/store";
import { trim } from "../../utils";

export default {
  name: "GoodsClass",
  components: {},
  props: {},
  data: function() {
    return {
      category: [],
      navActive: 0,
      search: "",
      lock: false,
      drawer: false,
      direction: "ttb",
      num: 1,
      index: 1
    };
  },
  watch: {
    "$route.params.pid": function(n) {
      console.log(n);
      if (n) {
        this.activeCateId(n);
      }
    }
  },
  mounted: function() {
    document.addEventListener("scroll", this.onScroll, false);
    this.loadCategoryData();
  },
  methods: {
    //  点击加入购物车按钮
    joinCart: function(child) {
      console.log(child);
      this.drawer = true;
    },

    activeCateId(n) {
      let index = 0;
      n = parseInt(n);
      if (!n) return;
      this.category.forEach((cate, i) => {
        if (cate.id === n) index = i;
      });

      if (index !== this.navActive) {
        this.asideTap(index);
      }
    },
    loadCategoryData() {
      let data = {
        storeId: 5
      };
      getCategory(data).then(res => {
        this.category = res.data;
        this.$nextTick(() => {
          if (this.$route.params.pid) this.activeCateId(this.$route.params.pid);
          else this.onScroll();
        });
      });
    },
    submitForm: function() {
      var val = trim(this.search);
      if (val) {
        this.$router.push({
          path: "/goods_list",
          query: { s: val }
        });
        setTimeout(() => (this.search = ""), 500);
      }
    },
    asideTap(index) {
      const top =
        this.$refs.title[index].offsetTop -
        this.$refs.header.offsetHeight -
        window.scrollY;

      this.lock = true;

      window.scrollBy({ top, left: 0, behavior: "smooth" });
      this.navActive = index;
    },
    onScroll: debounce(function() {
      if (this.lock) {
        this.lock = false;
        return;
      }
      const headerHeight = this.$refs.header.offsetHeight,
        { scrollY } = window,
        titles = this.$refs.title;
      titles.reduce((initial, title, index) => {
        if (initial) return initial;
        const parent = title.parentNode || title.parentElement;
        if (
          scrollY + headerHeight + 15 <
          title.offsetTop + parent.offsetHeight
        ) {
          initial = true;
          this.navActive = index;
        }
        return initial;
      }, false);
    }, 500)
  },
  beforeDestroy: function() {
    document.removeEventListener("scroll", this.onScroll, false);
  }
};
</script>

<style>
.head {
  width: 94%;
  height: 1.8rem;
  border-radius: 0.2rem;
  background: white;
  border: 1px solid silver;
  margin: 0.2rem 0 0.1rem 0;
}

.des {
  width: 100%;
  height: 0.6rem;
  padding-left: 20px;
  line-height: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.des2 {
  width: 100%;
  height: 0.4rem;
  padding-left: 20px;
  line-height: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content {
  display: flex;
}
.message {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  width: 3.5rem;
}
.message div {
  width: 3.5rem;
  height: 0.4rem;
}
.shop_name {
  font-size: 1.2em;
  color: black;
}
.shop_num {
  font-size: 0.8em;
  color: #e6e6e6;
}
.shop_price {
  color: red;
}
.m-cart {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  right: 0.2rem;
  margin: 0.2rem 0 0 0.1rem;
  font-size: 0.5rem !important;
  color: #409eff;
}

.jishu {
  width: 0.4rem;
  height: 0.4rem;
  color: white;
  background: red;
  font-size: 0.5em;
  text-align: center;
  line-height: 0.4rem;
  border-radius: 5px;
  margin-left: -6px;
  z-index: 9999;
}

.conter {
  width: 75%;
  height: 100%;
}

.name1 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 10px;
}

.footers {
  display: flex;
  width: 100%;
  height: 0.5rem;
  position: fixed;
  bottom: 1.5rem;
  z-index: 8888;
}
.footer1 {
  width: 20%;
  height: 1rem;
  background: #1a4273;
  display: flex;
}

.footer2 {
  width: 40%;
  height: 1rem;
  background: #1a4273;
  line-height: 1rem;
  color: white;
}

.footer3 {
  width: 40%;
  height: 1rem;
  background: #eb702d;
  text-align: center;
  line-height: 1rem;
  color: white;
}
.guige {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  margin: -1.4rem 0 0 0.3rem;
}

.mess1 {
  width: 4.5rem;
  position: absolute;
  margin: -1.4rem 0 0 2rem;
}

.mess1 p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0.1rem 0 0 0;
}

.gui_name {
  font-size: 0.4rem;
}
.gui_num {
  font-size: 0.3rem;
}

.gui_num1 {
  color: #1abb1d;
}
.gui_num2 {
  font-size: 0.4rem;
  color: #1abb1d;
}
.gui_num3 {
  font-size: 0.2rem;
  color: #bbbbbb;
  margin-left: 0.3rem;
}
.gui1 {
  width: 98%;
  display: flex;
  flex-wrap: wrap;
}
.gui1 span {
  border: #8c8c8c 1px solid;
  padding: 0.1rem 0.1rem 0.1rem 0.1rem;
  margin: 0.2rem 0 0 0.2rem;
}
.gui_footer {
  width: 100%;
  position: fixed;
  bottom: 0.2rem;
  display: flex;
  justify-content: space-around;
}
.gui_p {
  margin: 0.2rem 0 0 0.2rem;
}
.gui_con {
  overflow: auto;
  width: 100%;
  height: 4.3rem;
  overflow-y: scroll;
}
.select {
  background: #1abb1d;
}
.noselect {
  background: #ffffff;
}
</style>
